iT邦幫忙

2023 iThome 鐵人賽

DAY 13
1
自我挑戰組

轉職新手學 Django 及 DRF系列 第 13

Day 13 - 建立編輯使用者資料的頁面

  • 分享至 

  • xImage
  •  

今天來新增修改資料的頁面!

別忘記啟動虛擬環境

新增 update view

進入 core/views.py 加入以下程式碼:

# 其他程式碼
def update(request, pk):
    user = get_object_or_404(get_user_model(), pk=pk)
    if request.method == 'POST':
        user.email = request.POST['email']
        user.name = request.POST['username']

        user.save()
        return redirect('core:profile', pk=user.pk)

    return render(request, 'core/update.html')

基本上就是把 user 的資料拿出來,並賦予使用者請求中的新資料,然後儲存。接著到 core/urls.py 增加 path:

```python
urlpatterns = [
    # 其他程式碼
    path('update/<int:pk>', views.update, name='update'),
]

最後到 core/templates/core 新增update.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Update Profile</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.15/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-900 text-white min-h-screen flex items-center justify-center">
    <div class="bg-gray-800 p-8 rounded shadow-md w-full max-w-sm">
        <h1 class="text-2xl font-semibold mb-4">Update Profile</h1>
        <form method="post" class="space-y-4">
            {% csrf_token %}
            <div>
                <label for="email" class="block text-gray-300">Email:</label>
                <input type="email" id="email" name="email" required
                    class="w-full px-4 py-2 border rounded-md bg-gray-700 text-white focus:outline-none focus:border-blue-500">
            </div>
            <div>
                <label for="username" class="block text-gray-300">Username:</label>
                <input type="text" id="username" name="username" required
                    class="w-full px-4 py-2 border rounded-md bg-gray-700 text-white focus:outline-none focus:border-blue-500">
            </div>
            <button type="submit" formaction="{% url 'core:update' user.pk %}"
                class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600">
                Update
            </button>
        </form>
    </div>
</body>
</html>

這邊 update 按鈕一樣使用{% url %}的模板標籤,不過在後方要加入user.pk,才能正確傳送。別忘了在 profile 頁面也有一個地方要修改:

        <div class="mt-4">
            <!-- 新增 url tag -->
            <a href="{% url 'core:update' user.pk %}" class="bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600">Modify</a>
            <a href="#" class="bg-red-500 text-white py-2 px-4 rounded-md hover:bg-red-600 ml-2">Logout</a>
        </div>

都完成後,發現登出按鈕的網址還是個#那就來實作登出功能吧!

登出功能

登入及登出功能在 Django 中有內建的 class 可以使用,分別為LoginViewLogoutView,所以有些情況下可以不用自己製作。現在就使用現成的LogoutView 來實作登出功能!首先到 core/urls.py 中導入LogoutView並新增以下 path:

from django.contrib.auth.views import LogoutView
# 其他導入及程式碼
urlpatterns = [
    # 其他 path
    path('logout/', LogoutView.as_view(), name='logout')
]

這邊因為是使用 class based view,所以要使用as_view()來正確連接,接著到 app/settings.py 指定 LOGOUT_REDIRECT_URL 以覆蓋原本的預設值:

# 其他程式碼
LOGOUT_REDIRECT_URL = 'core:signup'

這邊指定回到登入頁面,更多資料可以參考:

LogoutView 官方文件
LoginView 官方文件

都完成後,輸入python manage.py runserver 看看成果並測試吧~

結語

到這邊這個專案算是告一段落了,雖然很簡單,但是基本的新增、修改、讀取功能都有實現,很多網頁的設計都需要 CRUD 功能,因此這個算是基礎中的基礎。接著來優化一下網頁,下次見~


上一篇
Day 12 - 建立個人資料頁面 & Django ORM
下一篇
Day 14 - 來優化一下程式碼吧!
系列文
轉職新手學 Django 及 DRF30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言